<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
      <el-menu-item index="1">
        <router-link to="/home">首页</router-link>
      </el-menu-item>
      <el-menu-item index="2">优惠券中心</el-menu-item>
      <el-menu-item index="3" @click="CreateCoupon()">添加优惠卷</el-menu-item>
      <el-menu-item style="float: right" index="4">
        <router-link to="/login">注册</router-link>
      </el-menu-item>
      <el-menu-item style="float: right" index="3">
        <router-link to="/login">登录</router-link>
      </el-menu-item>

    </el-menu>
    <div style="background: #ffffff">
      <el-divider>优惠卷中心</el-divider>
    </div>
    <div class="line"></div>
    <el-card class="box-card">
      <el-table
              :data="tableData"
              stripe
              style="width: 100%">
        <el-table-column
                prop="title"
                label="优惠卷名称">
        </el-table-column>
        <el-table-column
                prop="status_name"
                label="优惠卷状态">
          <template slot-scope="scope">
            <el-tag :type="state[scope.row.status]">{{scope.row.status_name}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
                prop="money"
                label="满减折扣">
        </el-table-column>
        <el-table-column
                prop="count"
                label="发放总数">
        </el-table-column>
        <el-table-column
                prop="apply_count"
                label="已领优惠卷">
        </el-table-column>
        <el-table-column
                label="优惠卷发放时间">
          <template slot-scope="scope">
            <div>{{scope.row.apply_start_date | renderTime}}</div>
          </template>
        </el-table-column>
        <el-table-column
                label="优惠卷结束时间">
          <template slot-scope="scope">
            <div>{{scope.row.apply_stop_date | renderTime}}</div>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button v-if="scope.row.status==1"
                       type="primary"
                       size="mini"
                       @click="CouponEdit(scope.$index, scope.row.id)">编辑
            </el-button>
            <el-button size="mini" v-else type="primary" disabled>编辑</el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="CouponDelete(scope.$index, scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="优惠卷管理" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="优惠卷名称">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="优惠卷状态">
          <el-select v-model="form.status" placeholder="活动区域">
            <el-option label="未开始" :value=1></el-option>
            <el-option label="领取中" :value=2></el-option>
            <el-option label="已结束" :value=3></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="满减折扣">
          <el-input v-model="form.money" autocomplete="off" type="number"></el-input>
        </el-form-item>
        <el-form-item label="发放总数">
          <el-input v-model="form.count" autocomplete="off" type="number"></el-input>
        </el-form-item>
        <el-form-item label="已领优惠卷">
          <el-input v-model="form.apply_count" autocomplete="off" type="number"></el-input>
        </el-form-item>
        <el-form-item label="优惠卷发放时间">
          <el-date-picker
                  v-model="form.apply_start_date"
                  type="datetime"
                  placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="优惠卷结束时间">
          <el-date-picker
                  v-model="form.apply_stop_date"
                  type="datetime"
                  placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmitClick(bool)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getAuctionCoupon, getAuctionCouponDelete, getAuctionCouponEdit} from "network/home"

  export default {
    name: "AuctionCoupon",
    data() {
      return {
        activeIndex: '2',
        tableData: [],
        form: [],
        dialogFormVisible: false,
        aid: null,
        state: {
          1: 'info',
          2: 'success',
          3: 'danger',
        },
        bool: true,
      };
    },
    methods: {
      CouponEdit(index, cid) {
        this.form = this.tableData[index]
        this.bool = false
        this.dialogFormVisible = true
        console.log(index, cid);
      },
      CouponDelete(index, cid) {
        getAuctionCouponDelete(cid).then(res => {
          if (res.status) {
            this.tableData.splice(index, 1)
          }
          console.log(res);
        }, err => {
          console.log(err);
        })
        console.log(index, cid);
      },
      CreateCoupon() {
        this.form = {
          apply_count: 0,
          apply_start_date: new Date(),
          apply_stop_date: '',
          count: 1,
          money: '',
          status: 1,
          title: '',
          status_name: '',
          id: ''
        }
        this.bool = true
        this.dialogFormVisible = true
      },
      onSubmitClick(bool) {
        // 真就是添加,假就是修改
        if (bool) {
          getAuctionCoupon(this.aid, 'post', this.form).then(res => {
            console.log(res);
            this.form.status_name = res.status_name
            this.form.id = res.id
            this.tableData.push(this.form)
          })
          console.log(this.form);
          // this.tableData.push(this.form)
        } else {
          this.form['auction'] = this.aid
          getAuctionCouponEdit(this.form).then(res => {
            console.log(res, this.form);
          }, err => {
            console.log(err);
          })
        }
        this.dialogFormVisible = false
      }
    },
    filters: {
      renderTime: function (value) {
        return new Date(+new Date(value) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
      }
    },
    created() {
      this.aid = this.$route.params.aid
      getAuctionCoupon(this.aid, 'get').then(res => {
        this.tableData = res
        console.log(res);
      }, err => {
        console.log(err);
      })
    }
  }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    margin: 0 auto;
    width: 100%
  }
</style>